<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<product-item></product-item>
			<product-item></product-item>
			<product-item></product-item>
			<product-item></product-item>
			<product-item1></product-item1>
		</div>

		<!-- 组件 -->
		<template id="item1">
			<div>
				<h2>我是h2dasfas</h2>
				<h2>{{title}}</h2>
				<product-item></product-item>
			</div>
		</template>

		<script src="./js/vue.js"></script>
		<script>
			// 1. 创建App组件(根组件)
			const App = {}

			// 2. 创建app
			const app = Vue.createApp(App)

			// 3. 注册组件
			app.component('product-item', {
				template: `
          <h1>我是h1</h1>
        `,
			})
			app.component('product-item1', {
				template: '#item1',
				data() {
					return {
						title: 'abc',
					}
				},
			})
			// 3. 挂载
			app.mount('#app')
		</script>
	</body>
</html>
